<template>
    <div class="detail_module_panel contacts_info">
        <!--标题-->
        <h3 id="personal_info" class="detail_panel_title detail_panel_title_icon contacts_icon">{{$t('common.contactsInfo')}}</h3>
        <div class="panel_info_content">
            <el-row>
                <el-col :span="12">
                    <div class="contact">
                        <el-row class="row">
                            <el-col class="label" :span="8">{{$t('common.contacts')}}{{$t('common.name')}}</el-col>
                            <el-col class="info" :span="16">{{ userData.contactFirst }}</el-col>
                        </el-row>
                        <el-row class="row">
                            <el-col class="label" :span="8">{{$t('common.relationshipWithOneself')}}</el-col>
                            <el-col class="info" :span="16">{{ userData.relationshipFirst | switchRelationShip }}</el-col>
                        </el-row>
                        <el-row class="row">
                            <el-col class="label" :span="8">{{$t('common.telephoneNumber')}}</el-col>
                            <el-col class="info" :span="16"><button @click="call(userData.phoneFirst)" class="btn-call" :disabled="!orderId || isCalling">{{ userData.phoneFirst }}</button><!--<span>（{{ $t('common.addressBookMatch') }}：{{ userData.phoneFirstList || $t('common.none') }}）</span>--></el-col>
                        </el-row>
                    </div>
                    <div class="contact">
                        <el-row class="row">
                            <el-col class="label" :span="8">{{$t('common.contacts')}}{{$t('common.name')}}</el-col>
                            <el-col class="info" :span="16">{{ userData.contactSecond }}</el-col>
                        </el-row>
                        <el-row class="row">
                            <el-col class="label" :span="8">{{$t('common.relationshipWithOneself')}}</el-col>
                            <el-col class="info" :span="16">{{ userData.relationshipSecond | switchRelationShip }}</el-col>
                        </el-row>
                        <el-row class="row">
                            <el-col class="label" :span="8">{{$t('common.telephoneNumber')}}</el-col>
                            <el-col class="info" :span="16"><button @click="call(userData.phoneSecond)" class="btn-call" :disabled="!orderId || isCalling">{{ userData.phoneSecond }}</button><!--<span>（{{ $t('common.addressBookMatch') }}：{{ userData.phoneSecondList || $t('common.none') }}）</span>--></el-col>
                        </el-row>
                    </div>
                     <div class="contact">
                        <el-row class="row">
                            <el-col class="label" :span="8">{{$t('common.contacts')}}{{$t('common.name')}}</el-col>
                            <el-col class="info" :span="16">{{ userData.contactThree }}</el-col>
                        </el-row>
                        <el-row class="row">
                            <el-col class="label" :span="8">{{$t('common.relationshipWithOneself')}}</el-col>
                            <el-col class="info" :span="16">{{ userData.relationshipThree | switchRelationShip }}</el-col>
                        </el-row>
                        <el-row class="row">
                            <el-col class="label" :span="8">{{$t('common.telephoneNumber')}}</el-col>
                            <el-col class="info" :span="16"><button @click="call(userData.phoneThree)" class="btn-call" :disabled="!orderId || isCalling">{{ userData.phoneThree }}</button></el-col>
                            <!-- <el-col class="info" :span="16">{{ userData.phoneSecond }}<span>（{{ $t('common.addressBookMatch') }}：{{ userData.phoneSecondList || $t('common.none') }}）</span></el-col> -->
                        </el-row>
                    </div>
                    <div class="contact">
                        <el-row class="row">
                            <el-col class="label" :span="8">{{$t('common.contacts')}}{{$t('common.name')}}</el-col>
                            <el-col class="info" :span="16">{{ userData.contactFour }}</el-col>
                        </el-row>
                        <el-row class="row">
                            <el-col class="label" :span="8">{{$t('common.relationshipWithOneself')}}</el-col>
                            <el-col class="info" :span="16">{{ userData.relationshipFour | switchRelationShip }}</el-col>
                        </el-row>
                        <el-row class="row">
                            <el-col class="label" :span="8">{{$t('common.telephoneNumber')}}</el-col>
                            <el-col class="info" :span="16"><button @click="call(userData.phoneFour)" class="btn-call" :disabled="!orderId || isCalling">{{ userData.phoneFour }}</button></el-col>
                            <!-- <el-col class="info" :span="16">{{ userData.phoneSecond }}<span>（{{ $t('common.addressBookMatch') }}：{{ userData.phoneSecondList || $t('common.none') }}）</span></el-col> -->
                        </el-row>
                    </div>
                    <div class="contact">
                        <el-row class="row">
                            <el-col class="label" :span="8">{{$t('common.contacts')}}{{$t('common.name')}}</el-col>
                            <el-col class="info" :span="16">{{ userData.contactFive }}</el-col>
                        </el-row>
                        <el-row class="row">
                            <el-col class="label" :span="8">{{$t('common.relationshipWithOneself')}}</el-col>
                            <el-col class="info" :span="16">{{ userData.relationshipFive | switchRelationShip }}</el-col>
                        </el-row>
                        <el-row class="row">
                            <el-col class="label" :span="8">{{$t('common.telephoneNumber')}}</el-col>
                            <el-col class="info" :span="16"><button @click="call(userData.phoneFive)" class="btn-call" :disabled="!orderId || isCalling">{{ userData.phoneFive }}</button></el-col>
                            <!-- <el-col class="info" :span="16">{{ userData.phoneSecond }}<span>（{{ $t('common.addressBookMatch') }}：{{ userData.phoneSecondList || $t('common.none') }}）</span></el-col> -->
                        </el-row>
                    </div>
                </el-col>
                <el-col :span="12">
                    <!--通讯录-->
                    <el-row v-if="isShowAddressBook" class="contact_row row">
                        <el-col class="label" :span="8">{{$t('audit.contactList')}}</el-col>
                        <el-col class="info" :span="16"><el-button type="text" @click="contactList">{{$t('common.check')}}</el-button></el-col>
                    </el-row>
                </el-col>
            </el-row>
            <!-- <el-row> -->
                <!-- <el-col :span="24"> -->
                    <!-- <div class="contact"> -->
                        <!-- <el-row class="row"> -->
                            <!-- <el-col class="label" :span="4">{{$t('common.auditSupplementContact')}}</el-col> -->
                        <!-- </el-row> -->
                        <!-- <el-row v-for="(contact, $index) in auditContactsList" :key="$index" class="row"> -->
                            <!-- <el-col class="label" :span="4">{{ $index + 1 }}</el-col> -->
                            <!-- <el-col class="info" :span="16"> -->
                                <!-- {{ contact.contactsName }} - <button @click="call(contact.contactsPhone)" class="btn-call" :disabled="!orderId || isCalling">{{ contact.contactsPhone }}</button> - {{ contact.relationship | switchRelationShip }} — {{ contact.operateUser }} — {{ contact.addTime | formatDate('yyyy-MM-dd hh:mm:ss') }} -->
                                <!-- <el-button v-if="contact.relationship == 'Company'" @click="searchWords(contact.contactsPhone)" type="text" size="mini" class="ml10" >{{ $t('common.positiveCheck') }}</el-button> -->
                            <!-- </el-col> -->
                        <!-- </el-row> -->
                    <!-- </div> -->
                <!-- </el-col> -->
            <!-- </el-row> -->
            <!-- <el-row> -->
                <!-- <el-col :span="24"> -->
                    <!-- <div class="contact"> -->
                        <!-- <el-row class="row"> -->
                            <!-- <el-col class="label" :span="4">{{$t('common.supplementContact')}}</el-col> -->
                            <!-- <el-col class="info" :span="20"><el-button @click="addPerson" type="text" icon="edit" size="mini">{{$t('common.append')}}</el-button></el-col> -->
                        <!-- </el-row> -->
                        <!-- <el-row v-for="(contact, $index) in addContactsList" :key="$index" class="row"> -->
                            <!-- <el-col class="label" :span="4">{{ $index + 1 }}</el-col> -->
                            <!-- <el-col class="info" :span="16"> -->
                                <!-- {{ contact.contactsName }} - <button @click="call(contact.contactsPhone)" class="btn-call" :disabled="!orderId || isCalling">{{ contact.contactsPhone }}</button> - {{ contact.relationship | switchRelationShip }} — {{ contact.operateUser }} — {{ contact.addTime | formatDate('yyyy-MM-dd hh:mm:ss') }} -->
                                <!-- <el-button v-if="contact.relationship == 'Company'" @click="searchWords(contact.contactsPhone)" type="text" size="mini" class="ml10" >{{ $t('common.positiveCheck') }}</el-button> -->
                            <!-- </el-col> -->
                        <!-- </el-row> -->
                    <!-- </div> -->
                <!-- </el-col> -->
            <!-- </el-row> -->
        </div>


        <!--添加联系人-->
        <el-dialog :title="$t('common.supplementContact')" :visible.sync="addPersonShow" width='350px'>
            <div>
                <el-form :model="addPersonInfo" class="users_search" :rules="rules" ref="addPersonInfo">
                    <el-form-item :label="$t('common.name')" prop="contactsName">
                        <el-input v-model="addPersonInfo.contactsName" :maxlength="100" :placeholder="$t('verify.plsInput')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('common.telephoneNumber')" prop="contactsPhone">
                        <el-input v-model="addPersonInfo.contactsPhone" :maxlength="20" :placeholder="$t('verify.plsInput')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('common.relationship')" prop="relationship">
                        <el-select v-model="addPersonInfo.relationship" :placeholder="$t('verify.plsChoose')">
                            <el-option v-for="item in relationshipData" :key="item.code" :value="item.code" :label="item.name"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="default" @click="addPersonShow = false ; addPersonInfo = {};">{{$t('common.cancel')}}</el-button>
                <el-button type="primary" :disabled="!(addPersonInfo.contactsName && addPersonInfo.contactsPhone && addPersonInfo.relationship) " @click="beforeSubmitPerson">{{$t('common.confirm')}}</el-button>
            </div>
        </el-dialog>

        <!-- 查看電話通讯录信息 -->
        <el-dialog class="blue_title tiny_dialog sms" :visible.sync="isVisibleTelContact" :close-on-click-modal="false" :title="$t('audit.telContactList')">
            <tel-contact v-if="isVisibleTelContact" :user-id="userId" :order-id="orderId"></tel-contact>
        </el-dialog>
    </div>
</template>

<script>
    import Vue from 'vue';
    import mixin from '@/service/mixin';
    import Pagination from '@/components/pagination';
    import keyMap from '../../../../config/key-map';
    import TelContact from './phone-detail/telContact';

    let that = null;
    export default {
        name: 'contactsInfo',
        components: {
            Pagination,
            TelContact,
        },
        props: {
            userData: {
                type: Object
            },
            userId: {
                default: ''
            },
            orderId: {
                default: ''
            },
            isCalling: {
                type: Boolean
            }
        },
        mixins: [mixin],
        computed: {
            rules() {
                const rules = {
                    contactsPhone: [{
                        pattern: /^\d+$/,
                        message: this.$t('verify.plsInputNumber'),
                        trigger: 'blur'
                    }]
                };
                return rules;
            },
            isShowAddressBook() {// 是否显示通讯录按钮
                return this.$store.getters.checkUserAuthority('/collection/order-manage/address-book');
            },
        },
        data() {
            return {
                addPersonShow: false,
                auditContactsList: [],
                addContactsList: [],
                addPersonInfo: {// 补充联系人信息
                    contactsName: '',
                    contactsPhone: '',
                    relationship: ''
                },
                relationshipData: keyMap.relationshipData,
                isVisibleTelContact: false,
            };
        },
        watch: {
        },
        methods: {
            //     增加联系人
            addPerson(){
                this.addPersonShow = true;
            },
            beforeSubmitPerson() {
                const phone = this.addPersonInfo.contactsPhone;
                const realship = this.addPersonInfo.relationship;
                const re = /^09[0-9]{9}$/;
                if(realship !== 'Company' && realship !== 'Others' && !re.test(phone)) {
                    this.$message.error(this.$t('verify.plsInputRightPhone'));
                    return;
                }
                this.submitPerson();
            },
            submitPerson() {
                const form = this.addPersonInfo;
                const param = {
                    userId: this.userId,
                    type: '2',
                    contactsName: form.contactsName,
                    contactsPhone: form.contactsPhone,
                    relationship: form.relationship,
                    operateUser: this.$storage.get('user').username,
                };
                this.addPersonDisabled = true;
                this.$api.customer.addUserContacts(param).then((res) => {
                    this.addPersonDisabled = false;
                    const { status, error } = res;
                    if (status === '1' && error === '00000000') {
                        this.$message.success(this.$t('common.successfulOperation'));
                        this.addPersonShow = false;
                        this.addPersonInfo = {};
                        this.getAddContact('2');
                    }
                });
            },
            getAddContact(type) {
                const params = {
                    userId: this.userId,
                    type: type
                };
                this.$api.customer.getUserContacts(params).then((res) => {
                    const { status, data, error } = res;
                    if (status === '1' && error === '00000000') {
                        if(type === '1') {
                            this.auditContactsList = data;
                        }
                        if(type === '2') {
                            this.addContactsList = data;
                        }
                    }
                });
            },
            // 通讯录
            contactList() {
                this.isVisibleTelContact = true;
            },
            call(number) {
                this.$emit('call',number);
            }
        },
        filters: {
            switchRelationShip(type) {
                switch (type) {
                    case 'Father':
                        return that.$t('common.relationShip.Father');// 父亲
                    case 'Mother':
                        return that.$t('common.relationShip.Mother');// 母亲
                    case 'Spouse':
                        return that.$t('common.relationShip.Spouse');// 伴侣
                    case 'Children':
                        return that.$t('common.relationShip.Children');// 孩子
                    case 'Friend':
                        return that.$t('common.relationShip.Friend');// 朋友
                    case 'Colleague':
                        return that.$t('common.relationShip.Colleague');// 同事
                    case 'Brothers And Sisters':
                        return that.$t('common.relationShip.BrothersAndSisters');// 兄弟姐妹
                    case 'BrothersAndSisters':
                        return that.$t('common.relationShip.BrothersAndSisters');// 兄弟姐妹
                    case 'Classmate':
                        return that.$t('common.relationShip.Classmate');// 同学
                    case 'Self':
                        return that.$t('common.relationShip.Self');// 新增本人号码
                    case 'Company':
                        return that.$t('common.relationShip.Company');// 公司号码
                    case 'WhatsApp':
                        return that.$t('common.relationShip.WhatsApp');// WhatsApp
                    case 'Others':
                        return that.$t('common.relationShip.Others');// Others
                    default:
                        return type;
                }
            },
        },
        created() {
            console.log(this.orderId)
            that = this;
            // this.getAddContact('1');
            // this.getAddContact('2');
        }
    };
</script>

<style lang="scss" scoped>
    .ml10 {
        margin-left: 10px;
    }

    .blue {
        color: #1983FA;
        margin-left: 10px;
    }

    .gray {
        color: #a6a8aa;
        margin-left: 10px;
    }

    .bold-font {
        font-weight: bold;
    }

    .contact {
        margin-bottom: 40px;
    }

    .contact_row.row {
        margin-bottom: 30px;
        .label {
            height: 24px;
            line-height: 24px;
        }
    }

    .dialog-title {
        float: left;
        .title_L {
            font-size: 20px;
            font-weight: 700;
        }
        .title_R {
            fongt-size: 12px;
            font-weight: 700;
            margin-left: 10px;
            margin-bottom: 20px;
        }
        .fontYellow {
            color: yellow;
        }
        .fontRed {
            color: red;
        }
        .fontNormal {
            color: inherit;
        }
    }
    .el-button {
        padding:4px;
    }
    .contacts_info {
        .contact {
            .info {
                word-wrap: break-word;
            }
        }
    }
</style>
